<template>
	<view :class="[primarySize()]">
		<view class=" bg-white page-foot">
			<view class="plr30 ptb10" @click="bindSubmit()">
				<button hover-class="none" class="btn1">发布评论</button>
			</view>
		</view>
		<view class="container">
			<view class="ptb20 plr30">
				<view class="business_item">
					<view class="recom_info">
						<view class="flex-box">
							<view class="business_img">
								<image :src="cdnurl(item.enterpriseinfo.logo)|| 'https://admin.mosizp.cn/static/public/business_logo.png'"></image>
							</view>
							<view class="flex-grow-1 business_info">
								<view class="flex-box">
									<view class="fs32 col3 fwb flex-grow-1">{{item.job.job_name}}</view>
								</view>
								<view class="flex-box">
									<view class="flex-grow-1">
										<view class="pt10 col6 fs24">{{item.job.city.shortname}} ｜{{item.enterpriseinfo.full_name||item.enterpriseinfo.company_name}}</view>
										<view class="m-ellipsis">
											<view class="label">{{item.job.salary_text}}</view>
											<!-- <view class="label">弹性工作</view>
											<view class="label">扁平管理</view>
											<view class="label">五险一金</view> -->
										</view>
									</view>
								</view>

							</view>
						</view>
					</view>
					<view class="star_con">
						<view class="flex-box star_item pb30">
							<view>办公环境：</view>
							<view class="flex-box">
								<image v-for="(item,index) in 5" :key="index" @click="bindStar1(index)" :src="index<star1?'https://admin.mosizp.cn/static/public/star-on.png':'https://admin.mosizp.cn/static/public/star.png'">
								</image>

							</view>
							<view class="star_level">{{startTexts[star1]}}</view>
						</view>
						<view class="flex-box star_item pb30">
							<view>企业福利：</view>
							<view class="flex-box">
								<image v-for="(item,index) in 5" :key="index" @click="bindStar2(index)" :src="index<star2?'https://admin.mosizp.cn/static/public/star-on.png':'https://admin.mosizp.cn/static/public/star.png'">
								</image>
								<view class="star_level">{{startTexts[star2]}}</view>
							</view>
						</view>
						<view class="flex-box star_item">
							<view>晋升空间：</view>
							<view class="flex-box">
								
							<image v-for="(item,index) in 5" :key="index" @click="bindStar3(index)" :src="index<star3?'https://admin.mosizp.cn/static/public/star-on.png':'https://admin.mosizp.cn/static/public/star.png'">
							</image>
								
							</view>
							<view class="star_level">{{startTexts[star3]}}</view>
						</view>
					</view>
					<view>
						<view class="tip_tit">选择标签</view>
						<view class="clearfix tip_info">
							<view class="tip_item" @click="bindSelectTag(item.name)" v-for="(item,index) in tags">{{item.name}}</view>
						</view>
						<view class="clearfix tip_info">
							<view class="tip_item active" v-for="(item,index) in selectedTags" @click="bindSelectTag(item)">{{item}}</view>
						</view>
						<view class="pr">
							<textarea maxlength="200" placeholder="可输入评论的详细内容" placeholder-class="cold7" @input="input"
								class="fs24 col3 text_main"></textarea>
							<view class="fs24 cold7 text_num">{{text_num}}／200</view>
						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	var validate = require("../../xilu/validate.js");
	export default {
		data() {
			return {
				
				item: {enterpriseinfo:{logo:''}},
				tags: [],
				text_num: 0,
				star1: 0,
				star2: 0,
				star3: 0,
				switch2Checked: false,
				content: '',
				selectedTags: [],
				startTexts: ['','非常差','差','一般','好','非常好'],
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad(options) {
			
		    this.getOpenerEventChannel().on('dataTransfer', data=>{
		      this.item = data.interview;
		      this.$util.getCommentTags().then(tags=>this.tags = tags);
		    });
		},
		methods: {
			bindStar1 (index) {
			    this.star1 = index + 1;
			},
			bindStar2 (index) {
			    this.star2 = index + 1
			},
			bindStar3 (index) {
			    this.star3 = index + 1
			},
			check: function (e) {
			    this.switch2Checked = !this.switch2Checked
			},
			input: function (e) {
			    this.text_num = e.detail.value.length;
				this.content = e.detail.value.trim()
			},
			bindSelectTag(tag) {
			    let index = this.selectedTags.indexOf(tag);
			    if(index>-1) {
			      this.selectedTags.splice(index, 1);
			    }else {
			      this.selectedTags.push(tag);
			    }
			    
			},
			bindSubmit() {
			    let data = {
			      interview_id: this.item.id,
			      environment_score: this.star1||'',
			      benefit_score: this.star2||'',
			      opportunity_score: this.star3||'',
			      tags: this.selectedTags.join(','),
			      content: this.content,
			      anonymous: this.switch2Checked ? 1:0,
			    };
				var rule = [
					{name: 'environment_score',rules: ['require'],errorMsg: {require: '请对办公环境评分'}},
					{name: 'benefit_score',rules: ['require'],errorMsg: {require: '请对企业福利评分'}},
					{name: 'opportunity_score',rules: ['require'],errorMsg: {require: '请对晋升空间评分'}},
					{name: 'content',rules: ['require'],errorMsg: {require: '请填写评论内容'}},
				];
				// 是否全部通过，返回Boolean
				if (!validate.check(data, rule)) {
				    uni.showToast({
				        title: validate.getError()[0],
				        icon: 'none'
				    });
				    return;
				}
			    this.$core.post({
			      url: 'xilujob.interview_comment/add_comment', data: data,
			      success: ret => {
			        this.getOpenerEventChannel().emit('dataTransfer', {interview: this.item});
			        uni.navigateBack();
			      }
			    });
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btn1 {
		height: 82rpx;
		line-height: 82rpx;
		font-size: 30rpx;
	}

	.business_item {
		box-shadow: 0px 1px 18px 0px rgba(0, 0, 0, 0.06);
		background-color: #fff;
		border-radius: 4rpx;
		border: 1rpx solid #EBEBEB;
		margin-bottom: 18rpx;
		padding: 35rpx 30rpx 10rpx;
		position: relative;
		overflow: hidden;
		position: relative
	}

	.business_img {
		align-self: flex-start;
		margin-top: 20rpx;
	}

	.business_img image {
		width: 102rpx;
		height: 102rpx;
		margin-right: 20rpx;
	}

	/* .business_img image{width: 100%;height: 100%;display: block} */
	.business_info {
		font-size: 24rpx;
		color: #333
	}

	.cancel_star {
		font-size: 20rpx;
		color: #999;
		line-height: 39rpx;
		height: 39rpx;
		border-radius: 8rpx;
		border: 1rpx solid #E1E1E1;
		padding: 0 15rpx;
		margin-bottom: 13rpx;
		margin-right: 26rpx;
		margin-top: 40rpx;
	}

	.star_type {
		float: left;
		font-size: 20rpx;
		color: #999;
		border-radius: 8rpx;
		line-height: 39rpx;
		height: 39rpx;
		padding: 0 17rpx;
		background-color: #F7F7F7;
		border: 1rpx solid #F7F7F7;
		margin-right: 13rpx;
		margin-bottom: 13rpx;
	}



	.top {
		position: absolute;
		top: 0;
		right: 0;
		width: 74rpx;
		height: 74rpx;
	}

	.tip_tit {
		line-height: 102rpx;
		border-bottom: 1rpx solid #F3F3F3;
		font-size: 30rpx;
		color: #333
	}

	.tip_item {
		float: left;
		padding: 0 19rpx;
		line-height: 56rpx;
		margin-right: 24rpx;
		border-radius: 8rpx;
		margin-bottom: 19rpx;
		background-color: #F7F7F7;
		font-size: 24rpx;
		color: #999999
	}

	.tip_item image {
		display: inline-block;
		vertical-align: middle
	}

	.tip_info {
		padding-top: 37rpx;
		padding-bottom: 18rpx;
	}

	.ml0 {
		margin-left: 0
	}

	.text_main {
		width: 100%;
	}

	.tip_item.active {
		color: var(--primary);
		background-color: var(--primary1)
	}

	.bgf6 {
		background-color: #f6f6f6
	}

	.text_num {
		position: absolute;
		bottom: 20rpx;
		right: 0;
	}

	.star_item image {
		width: 36rpx;
		height: 36rpx;
		display: block;
		margin-right: 10rpx;
	}

	.star_con {
		padding: 50rpx 0;
		border-top: 1rpx solid #e1e1e1;
		border-bottom: 1rpx solid #e1e1e1
	}

	.star_level {
		font-size: 28rpx;
		color: rgba(40, 40, 40, 0.5)
	}

	.recom_price {
		font-size: 28rpx;
		color: #f21b23;
		font-weight: bold;
		padding-top: 20rpx;
	}

	.recom_info {
		padding-bottom: 30rpx;
	}

	.label {
		display: inline-block;
		vertical-align: top;
		padding: 0 8rpx;
		height: 32rpx;
		background: #ECEFF5;
		border-radius: 4rpx;
		line-height: 32rpx;
		font-size: 22rpx;
		color: #A5A5A5;
		margin-right: 10rpx;
		margin-top: 15rpx;
	}
</style>